<!DOCTYPE html>
<html>

<head>
  <title>后台管理系统</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "微软雅黑", sans-serif;
    }

    body {
      display: flex;
      min-height: 100vh;
      background-color: #f0f2f5;
    }

    .sidebar {
      width: 240px;
      background: #1f2937;
      color: white;
      padding: 20px;
      position: sticky;
      top: 0;
      height: 100vh;
      overflow-y: auto;
    }

    .sidebar a {
      display: block;
      padding: 12px 20px;
      color: white;
      text-decoration: none;
      margin: 8px 0;
      border-radius: 4px;
      transition: background-color 0.3s;
    }

    .sidebar a:hover,
    .sidebar a.active {
      background-color: #374151;
    }

    .content {
      flex: 1;
      padding: 20px 40px;
      background-color: #f0f2f5;
    }

    .header {
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }

    .user-table,
    .log-table {
      width: 100%;
      background: white;
      border-collapse: collapse;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .user-table th,
    .user-table td,
    .log-table th,
    .log-table td {
      padding: 15px 20px;
      text-align: left;
      border-bottom: 1px solid #f0f0f0;
    }

    .user-table th,
    .log-table th {
      background-color: #f8f9fa;
      font-weight: 500;
    }

    .user-table .view-btn,
    .user-table .delete-btn {
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.95em;
    }

    .user-table .view-btn {
      background-color: #1a73e8;
      color: white;
      margin-right: 5px;
    }

    .user-table .delete-btn {
      background-color: #dc2626;
      color: white;
    }

    .log-table td[style*="color: green"] {
      color: #22c55e;
    }

    .log-table td[style*="color: red"] {
      color: #ef4444;
    }
  </style>
</head>

<body>
  <!-- 左侧导航 -->
  <div class="sidebar">
    <h3 style="color: white; margin-bottom: 30px; font-size: 1.3em; font-weight: 600;">后台管理</h3>
    <a href="#user-manage" onclick="showContent('user-manage', this)" class="active">用户管理</a>
    <a href="#reset-log" onclick="showContent('reset-log', this)">密码重置日志</a>
  </div>

  <!-- 右侧内容区域 -->
  <div class="content">
    <div class="header">
      <h1>欢迎来到后台管理系统</h1>
    </div>
    <div id="contentArea"></div>
  </div>

  <script>
    // 记录当前激活的导航链接
    let activeLink = null;

    function showContent(page, link) {
      const contentArea = document.getElementById('contentArea');
      contentArea.innerHTML = '';

      // 切换导航激活状态
      if (activeLink) activeLink.classList.remove('active');
      link.classList.add('active');
      activeLink = link;

      switch (page) {
        case 'user-manage':
          renderUserManage();
          break;
        case 'reset-log':
          renderResetLog();
          break;
      }
    }

    function renderUserManage() {
      const users = [
        { username: 'alice', registerTime: '2023-10-01 14:20', isAdmin: false },
        { username: 'bob', registerTime: '2023-10-05 09:30', isAdmin: true },
        { username: 'charlie', registerTime: '2023-10-10 16:45', isAdmin: false }
      ];

      const html = `
                <div style="margin-bottom: 20px;">
                    <input type="text" id="searchUser" placeholder="搜索用户名" 
                           style="padding: 10px 15px; border: 1px solid #e0e0e0; border-radius: 4px; width: 300px;">
                </div>
                <table class="user-table">
                    <tr>
                        <th>用户名</th>
                        <th>注册时间</th>
                        <th>是否管理员</th>
                        <th>操作</th>
                    </tr>
                </table>
            `;

      const table = document.createElement('table');
      table.className = 'user-table';
      table.innerHTML = html.match(/<table[^>]*>[\s\S]*<\/table>/)[0];

      users.forEach(user => {
        const row = table.insertRow();
        row.innerHTML = `
                    <td>${user.username}</td>
                    <td>${user.registerTime}</td>
                    <td>${user.isAdmin ? '是' : '否'}</td>
                    <td>
                        <button class="view-btn" onclick="viewUser('${user.username}')">查看</button>
                        <button class="delete-btn" onclick="deleteUser('${user.username}')">删除</button>
                    </td>
                `;
      });

      contentArea.appendChild(table);
    }

    function renderResetLog() {
      const logs = [
        { username: 'alice', time: '2023-10-15 11:00', status: '成功', reason: '正常重置' },
        { username: 'david', time: '2023-10-15 11:05', status: '失败', reason: '密保错误' },
        { username: 'alice', time: '2023-10-15 11:10', status: '成功', reason: '正常重置' }
      ];

      const logTable = document.createElement('table');
      logTable.className = 'log-table';
      logTable.innerHTML = `
                <tr>
                    <th>用户名</th>
                    <th>重置时间</th>
                    <th>状态</th>
                    <th>原因</th>
                </tr>
            `;

      logs.forEach(log => {
        const row = logTable.insertRow();
        row.innerHTML = `
                    <td>${log.username}</td>
                    <td>${log.time}</td>
                    <td style="color: ${log.status === '成功' ? 'green' : 'red'}">${log.status}</td>
                    <td>${log.reason}</td>
                `;
      });

      contentArea.appendChild(logTable);
    }

    // 查看用户详情（需配合user-detail.html使用）
    function viewUser(username) {
      window.location.href = `user-detail.html?username=${encodeURIComponent(username)}`;
    }

    // 检查登录状态（模拟）
    if (!localStorage.getItem('adminToken')) {
      window.location.href = 'login.html';
    }
  </script>
</body>

</html>